<template>
  <div class="node-wrap">
    <div class="node-wrap-box" @click="show">
      <!--  style="background: #ff943e" 禁用Div -->
      <div class="title" style="background: #ff943e">
        <el-icon class="icon"><el-icon-user-filled /></el-icon>
        <span>{{ data.nodeConfig.nodeName }}</span>
        <el-icon class="close" @click.stop="delNode()">
          <el-icon-close />
        </el-icon>
      </div>
      <div class="content">
        <span v-if="data.nodeConfig">
          {{ toText(data.nodeConfig) }}
        </span>
        <span v-else class="placeholder">请选择</span>
      </div>
    </div>
    <add-node v-model="data.nodeConfig.childNode"></add-node>
    <el-drawer
      title="审批人设置"
      v-model="data.drawer"
      destroy-on-close
      append-to-body
      :size="500"
    >
      <template #title>
        <div class="node-wrap-drawer__title">
          <el-form-item label="流程节点名称">
            <el-select v-model="data.form.nodeName">
              <el-option
                v-for="item in data.processNodeNames"
                :key="item.id"
                :value="item.taskName"
                :label="item.taskName"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <label @click="editTitle" v-if="!isEditTitle">
            {{ form.nodeName }}
            <el-icon class="node-wrap-drawer__title-edit">
              <el-icon-edit />
            </el-icon>
          </label> -->
          <!-- <el-input
            v-if="data.isEditTitle"
            ref="nodeTitle"
            v-model="data.form.nodeName"
            clearable
            @blur="saveTitle"
            @keyup.enter="saveTitle"
          ></el-input> -->
        </div>
      </template>
      <el-container>
        <el-main style="padding: 0 20px 20px 20px">
          <el-form label-position="top">
            <el-form-item label="审批人员类型">
              <el-select v-model="data.form.auditorType">
                <el-option :value="'User'" label="指定成员"></el-option>
                <!-- <el-option :value="2" label="主管"></el-option> -->
                <el-option :value="'Role'" label="角色"></el-option>
                <!-- <el-option :value="4" label="发起人自选"></el-option> -->
                <!-- <el-option :value="5" label="发起人自己"></el-option> -->
                <!-- <el-option :value="7" label="连续多级主管"></el-option> -->
              </el-select>
            </el-form-item>

            <el-form-item
              v-if="data.form.auditorType == 'User'"
              label="选择成员"
            >
              <el-button
                type="primary"
                icon="el-icon-plus"
                round
                @click="selectHandle(1, data.form.nodeUserList)"
              >
                选择人员
              </el-button>
              <div class="tags-list">
                <el-tag
                  v-for="(user, index) in data.form.nodeUserList"
                  :key="user.id"
                  closable
                  @close="delUser(index)"
                >
                  {{ user.name }}
                </el-tag>
              </div>
            </el-form-item>

            <el-form-item v-if="data.form.auditorType == 2" label="指定主管">
              发起人的第
              <el-input-number v-model="data.form.examineLevel" :min="1" />
              级主管
            </el-form-item>

            <el-form-item
              v-if="data.form.auditorType == 'Role'"
              label="选择角色"
            >
              <el-button
                type="primary"
                icon="el-icon-plus"
                round
                @click="selectHandle(2, data.form.nodeRoleList)"
              >
                选择角色
              </el-button>
              <div class="tags-list">
                <el-tag
                  v-for="(role, index) in data.form.nodeRoleList"
                  :key="role.id"
                  type="info"
                  closable
                  @close="delRole(index)"
                >
                  {{ role.name }}
                </el-tag>
              </div>
            </el-form-item>

            <el-form-item v-if="data.form.setType == 4" label="发起人自选">
              <el-radio-group v-model="data.form.selectMode">
                <el-radio :label="1">自选一个人</el-radio>
                <el-radio :label="2">自选多个人</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item
              v-if="data.form.setType == 7"
              label="连续主管审批终点"
            >
              <el-radio-group v-model="data.form.directorMode">
                <el-radio :label="0">直到最上层主管</el-radio>
                <el-radio :label="1">自定义审批终点</el-radio>
              </el-radio-group>
              <p v-if="data.form.directorMode == 1">
                直到发起人的第
                <el-input-number v-model="data.form.directorLevel" :min="1" />
                级主管
              </p>
            </el-form-item>

            <el-divider></el-divider>
            <el-form-item label="">
              <el-checkbox
                v-model="data.form.termAuto"
                label="超时自动审批"
              ></el-checkbox>
            </el-form-item>
            <template v-if="data.form.termAuto">
              <el-form-item label="审批期限（为 0 则不生效）">
                <el-input-number v-model="data.form.term" :min="0" />
                小时
              </el-form-item>
              <el-form-item label="审批期限超时后执行">
                <el-radio-group v-model="data.form.termMode">
                  <el-radio :label="0">自动通过</el-radio>
                  <el-radio :label="1">自动拒绝</el-radio>
                </el-radio-group>
              </el-form-item>
            </template>
            <el-divider></el-divider>
            <el-form-item label="多人审批时审批方式">
              <el-radio-group v-model="data.form.examineMode">
                <p style="width: 100%">
                  <el-radio :label="1">按顺序依次审批</el-radio>
                </p>
                <p style="width: 100%">
                  <el-radio :label="2">
                    会签 (可同时审批，每个人必须审批通过)
                  </el-radio>
                </p>
                <p style="width: 100%">
                  <el-radio :label="3">或签 (有一人审批通过即可)</el-radio>
                </p>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-main>
        <el-footer>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="data.drawer = false">取消</el-button>
        </el-footer>
      </el-container>
    </el-drawer>
  </div>
  <transfer-dialog
    v-if="data.dialog.transfer"
    ref="transferDialogRef"
    @selectedEmit="selectedEmit"
  ></transfer-dialog>
</template>

<script setup lang="ts">
import { reactive, watch, ref, nextTick, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import addNode from './addNode.vue';
import transferDialog from '@/components/NetTransfer/index.vue';
import processNodeNameApi from '@/api/flow/processNodeName/index';
import taskDefinitionApi from '@/api/flow/taskDefinition/index';
const router = useRouter();
const route = useRoute();
//路由传参
let routeQuery = route.query;
let transferDialogRef = ref('');
const props = defineProps({
  modelValue: { type: Object, default: () => {} },
  currentData: { type: Object, default: () => {} },
});
onMounted(() => {
  data.nodeConfig = props.currentData;
});
const selectedEmit = (selectedUser: any, selectedRole: any) => {
  data.emitData.selectedUser = selectedUser;
  data.emitData.selectedRole = selectedRole;
  if (data.emitData.selectedRole != null) {
    data.saveDto.Auditors = data.emitData.selectedRole
      .map((s: any) => s.Id)
      .join();
  } else {
    data.saveDto.Auditors = data.emitData.selectedUser
      .map((s: any) => s.Id)
      .join();
  }
};
// const getInfoById = async () => {
//   data.form = {};
//   data.form = JSON.parse(JSON.stringify(data.nodeConfig));
//   data.drawer = true;

// };
const data = reactive<any>({
  dialog: {
    transfer: false,
  },
  nodeConfig: {
    type: Object as any,
    default: () => {},
  },
  drawer: false,
  isEditTitle: false,
  form: { type: Object as any, default: () => {} },
  saveDto: {
    //任务定义名称
    ProcessTaskName: '',
    //流程定义id
    ProcessDefinitionId: '',
    //审批人id
    Auditors: '',
    //审核人类型(Role:角色,User:用户)
    AuditorType: '',
  },
  processNodeNames: [],
  value: '',
  emitData: {
    selectedRole: [],
    selectedUser: [],
  },
  // process,
});
let emit: any = defineEmits();
watch([() => props.modelValue], (modelValue: any) => {
  data.nodeConfig = modelValue;
});
watch(
  () => props.currentData,
  (currentData: any) => {
    data.nodeConfig = currentData;
  }
);
const show = () => {
  data.form = {};
  data.form = JSON.parse(JSON.stringify(data.nodeConfig));
  data.drawer = true;
};
const getProcessNodeNames = async () => {
  var res = await processNodeNameApi.getAllList.get();
  data.processNodeNames = res.data;
};
const saveTitle = () => {
  data.isEditTitle = false;
};
//流程任务保存
const save = async () => {
  data.drawer = false;
  data.saveDto.ProcessDefinitionId = routeQuery.id;
  var res = await taskDefinitionApi.save.post(data.saveDto);
};
const delNode = () => {
  emit('update:modelValue', (data.nodeConfig as any).childNode);
};
const delUser = (index: any) => {
  (data.form as any).nodeUserList.splice(index, 1);
};
const delRole = (index: any) => {
  data.emitData.selectedRole.splice(index, 1);
};
const selectHandle = (type: any, currentData: any) => {
  // this.select(type, data);
  data.dialog.transfer = true;
  //transferDialogRef
  nextTick(() => {
    (transferDialogRef.value as any).open(type);
  });
};
const toText = (nodeConfig: any) => {
  if (nodeConfig.auditorType == 'haha') {
    if (nodeConfig.nodeUserList && nodeConfig.nodeUserList.length > 0) {
      const users = nodeConfig.nodeUserList
        .map((item: any) => item.name)
        .join('、');
      return users;
    } else {
      return false;
    }
  } else if (nodeConfig.auditorType == 'sss') {
    return nodeConfig.examineLevel == 1
      ? '直接主管'
      : `发起人的第${nodeConfig.examineLevel}级主管`;
  } else if (nodeConfig.auditorType == 'Role') {
    if (nodeConfig.nodeRoleList && nodeConfig.nodeRoleList.length > 0) {
      const roles = nodeConfig.nodeRoleList
        .map((item: any) => item.name)
        .join('、');
      return '角色-' + roles;
    } else {
      return false;
    }
  } else if (nodeConfig.auditorType == 4) {
    return '发起人自选';
  } else if (nodeConfig.auditorType == 5) {
    return '发起人自己';
  } else if (nodeConfig.auditorType == 7) {
    return '连续多级主管';
  }
};

getProcessNodeNames();
</script>

<style></style>
